﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>用户管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/plugins/layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-fluid">  
  <div class="layui-row layui-col-space1">
    <div class="layui-col-md2">
      <div id="tree-departs"></div>
    </div>
    <div class="layui-col-md10">
        <div style="padding-bottom: 10px;">
            <button class="layui-btn layui-btn-danger layuiadmin-btn-list" data-type="batchdel"><i class="layui-icon layui-icon-delete"></i>删除</button>
            <button class="layui-btn layui-btn-normal layuiadmin-btn-list" data-type="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>
            <button class="layui-btn layuiadmin-btn-list" data-type="refresh"><i class="layui-icon layui-icon-refresh"></i>刷新</button>
            <div class="layui-form" lay-filter="search-form" id="search-form" style="float:right">
            <div class="layui-inline">
                <input class="layui-input" name="keyword" id="keyword" placeholder="请输入搜索条件">
                <input name="departid" id="departid" type="hidden">
            </div>
            <button class="layui-btn" lay-submit lay-filter="btn_search"><i class="layui-icon layui-icon-search"></i>搜索</button>
            </div>
        </div>
        <table id="dds-list" lay-filter="dds-list"></table> 
        <script type="text/html" id="tpl_status">
            {{#  if(d.status==1){ }}
            <button class="layui-btn layui-btn-xs">启用</button>
            {{#  } else { }}
            <button class="layui-btn layui-btn-primary layui-btn-xs">禁用</button>
            {{#  } }}
        </script>
        <script type="text/html" id="table-content-list">
            <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
    </div>
  </div>
  </div>
</div>
</div>
  <script src="/plugins/layui/layui.js"></script> 
  <script>
  layui.config({
    base: '/plugins/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index','table','tree'], function(){
    var $ = layui.$, table = layui.table, form = layui.form, tree = layui.tree, router = layui.router();
    var load_start = layer.load(2);

    $.ajax({
        type: "get",
        url: "depart_tree",
        data: router.search,
        dataType: "json",
        success: function (res) {
            layer.close(load_start);
            //部门显示
            tree.render({
                elem: '#tree-departs', 
                data: res.data, 
                id: 'tree-departs',
                onlyIconControl:true,
                click: function (obj) {
                     //当前点击的树节点
                    var currTreeId = obj.data.id;
                    //上一次点击的树节点id
                    var beforeTreeId =  $('#departid').val();
                    //对比前后id，不相同时移除上一个节点的样式，并设置当前点击的节点样式
                    if (currTreeId !== beforeTreeId){
                        $('div [data-id="'+currTreeId+'"] div').eq(1).last().css('background-color','#87eaa3');
                        $('div [data-id="'+beforeTreeId+'"] div').eq(1).last().css('background-color','');
                        $('#departid').val(obj.data.id);
                    }

                    var field=form.val('search-form');
                    //执行重载
                    table.reload('dds-list', {
                       where: field
                    });
                }
            });
        }
    });

    table.render({
        elem: '#dds-list'
        , url: 'user_list' //接口
        , cols: [[
        { type: 'checkbox', fixed: 'left' }
            , { field: 'username', title: '登录名', minWidth: 100 }
            , { field: 'realname', title: '姓名', minWidth: 100 }
            , { field: 'rolename', title: '所属角色', minWidth: 100 }
            , { field: 'departname', title: '所属部门', minWidth: 100 }
            , { field: 'gender', title: '性别', width: 70,align: 'center' }
            , { field: 'mobile', title: '手机号码', minWidth: 100 }
            , { field: 'status', title: '状态',width:70,align: 'center', templet: '#tpl_status' }
            , { title: '操作', minWidth: 170, align: 'center', fixed: 'right', toolbar: '#table-content-list' }
        ]]
        , page: true
        , request: {
        pageName: 'pageindex', //页码的参数名称，默认：page
        limitName: 'pagesize' //每页数据量的参数名，默认：limit
        }
        , limit: 20
        , limits: [20, 50, 100]
        , text: {
        none: '暂无相关数据'
        }
    });

    //监听搜索
    form.on('submit(btn_search)', function(data){
      var field = data.field;
      //执行重载
      table.reload('dds-list', {
        where: field
      });
    });

    //监听操作
    var active = {
      batchdel: function(){
        var checkStatus = table.checkStatus('dds-list')
        ,checkData = checkStatus.data; //得到选中的数据
        if(checkData.length === 0){
          return layer.msg('请选择数据');
        }

        var ids = [];//存储id的数组
        checkData.forEach(function (item) {
          ids.push(item.id);
        });
      
        layer.confirm('您确定要删除吗？删除后将无法进行恢复。',{icon: 3, title:'提示'}, function (index) {
          $.ajax({
                type: "post",
                url: "user_list",
                data: {ids:ids.join(",")},
                dataType: "json",
                success: function (data) {
                    if (data.code == 0)
                    {
                      table.reload('dds-list');
                      layer.msg(data.msg);
                    }
                }
          });
        });
      },
      add: function(){
        layer.open({
          type: 2
          ,title: '添加用户'
          ,content: 'user_add.html'
          ,maxmin: true
          ,area: ['900px', '650px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            //点击确认触发 iframe 内容中的按钮提交
            var submit = layero.find('iframe').contents().find("#btn_submit");
            submit.click();
          }
        }); 
      },
      refresh: function () {
        table.reload('dds-list');
      }
    }; 

    $('.layui-btn.layuiadmin-btn-list').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

    //监听工具条
    table.on('tool(dds-list)', function(obj){
      var data = obj.data;
      if(obj.event === 'del'){
        layer.confirm('您确定要删除吗？删除后将无法进行恢复。',{icon: 3, title:'提示'}, function(index){
          $.ajax({
                type: "post",
                url: "user_list",
                data: {ids:data.id},
                dataType: "json",
                success: function (data) {
                    if (data.code == 0)
                    {
                      table.reload('dds-list');
                      layer.msg(data.msg);
                    }
                }
          });
        });
      } else if(obj.event === 'edit'){
        layer.open({
          type: 2
          ,title: '编辑用户'
          ,content: 'user_add.html#/id='+data.id
          ,maxmin: true
          ,area: ['900px', '650px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var submit = layero.find('iframe').contents().find("#btn_submit");
            submit.trigger('click');
            }
        });
      } 
    });

  });
  </script>
</body>
</html>
